<template>
	<view class="content msgContent">
		<view v-if="msgList.length > 0">
			<view class="messageBox flex-column" v-for="(item, i) in msgList" :key="i">
				<view class="boxItem flex-column">
					<view class="titleLine">
						<view class="black-color">
							<text>{{item.data.title}}</text>
							<view class="red-dot" v-if="!item.read_at" style=""></view>
						</view>
						<view class="time">07/22 08:19</view>
					</view>

					<text class="mainContent">{{item.data.content}}</text>

					<view class="toDetail" @click="">
						<text class="lookDetail">查看详情</text>
						<image src="../../static/images/right.png" mode="" class="right-icon"></image>
					</view>
				</view>
			</view>
			<u-loadmore v-if="msgList.length > 0" :status="status" :load-text="loadText" @loadmore="loadmore" />
		</view>
		<!-- <view class="flex-column aligncanter" v-else>
			<image src="../../static/images/" mode="" class="noList">
			</image>
			<view class="gray-color2 fs-16" style="width: 100%;text-align: center;">
				暂无消息
			</view>
		</view> -->
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				msgList: [
					{
						data: {
							title: '您的请假申请已审核通过',
							content: '您于2020-07-22 08:19提交的请假申请已审核通过，请及时查看',
							read_at: false
						}
					},
					{
						data: {
							title: '您的请假申请已审核通过',
							content: '您于2020-07-22 08:19提交的请假申请已审核通过，请及时查看',
							read_at: true
						}
					}
				],
				status: 'loadmore',
				loadText: {
					loadmore: '点击加载',
					loading: '努力加载中',
					nomore: '没有更多'
				},
			}
		},
		methods: {

		},
	}
</script>

<style scoped lang="scss">
	page {
		background: #F0F5F3;
	}

	/deep/.u-load-more-wrap {
		background: #F0F5F3 !important;
	}

	/deep/.u-more-text {
		background: #F0F5F3 !important;
	}

	.msgContent {
		width: 100%;
		padding: 24rpx 32rpx;
	}

	.messageBox {
		margin-bottom: 20rpx;
		width: 100%;
		align-items: center;
	}

	.boxItem {
		padding: 32rpx 32rpx 0 32rpx;
		width: 100%;
		background: #fff;
		border-radius: 8px;
	}

	.titleLine {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.time{
			font-size: 24rpx;
			font-weight: 400;
			color: #8D9893;
		}
	}

	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.toDetail {
		padding: 16rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.lookDetail{
			font-size: 28rpx;
			font-weight: 400;
			color: #4A4E4C;
		}
	}

	.noList {
		margin-top: 120rpx;
		width: 196rpx;
		height: 196rpx;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.right-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.black-color {
		font-size: 32rpx;
		font-weight: 600;
		color: #1A201D;
		line-height: 44rpx;
	}
	.red-dot {
		right: -18rpx;
		top: 0;
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		background: #FA3535;
		border-radius: 100%;
	}
	.mainContent{
		margin-top: 32rpx;border-bottom: solid 1px #EBF7FA;padding: 0 0 16rpx 0;
		font-size: 28rpx;
		font-weight: 400;
		color: #8D9893;
	}
</style>
